<template>
    <div>
        <h3>会员增加</h3>
        <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">会员编号</td>
          <td><input type="text" v-model="queryInfo.userCode"  disabled/></td>
        </tr>
        <tr>
          <td align="right">会员姓名</td>
          <td><input type="text" v-model="queryInfo.userName" /></td>
        </tr>
        <tr>
          <td align="right">会员手机号</td>
          <td>
            <input type="text" v-model="queryInfo.phone" maxlength="11" />
          </td>
        </tr>
        <tr>
          <td align="right">身份证号码</td>
          <td><input type="text" v-model="queryInfo.code" maxlength="18"/></td>
        </tr>
        <tr>
          <td align="right">会员性别</td>
          <td>
            <input
              type="radio"
              name="sex"
              :value="1"
              v-model="queryInfo.sex"
            />男
            <input
              type="radio"
              name="sex"
              :value="0"
              v-model="queryInfo.sex"
            />女
          </td>
        </tr>
        <tr>
          <td align="right">会员状态</td>
          <td>
            <input
              type="radio" name="state" :value="1" v-model="queryInfo.state">可用
            <input type="radio" name="state" :value="0" v-model="queryInfo.state"/>冻结
          </td>
        </tr>
        <tr>
          <td align="right">会员积分</td>
          <td>
            <input type="text" v-model="queryInfo.jiFen" />
          </td>
        </tr>
        <tr>
          <td align="right">会员余额</td>
          <td>
            <input type="text" v-model="queryInfo.money" />
          </td>
        </tr>
        <tr>
          <td align="right">会员等级</td>
          <td>
            <select v-model="queryInfo.levelId">
              <option value="">请选择</option>
              <option  :value="item.id" v-for="item in data" :key="item.id">{{item.leveName}}</option>
            </select>
          </td>
        </tr>

        <tr>
          <td align="right">会员头像</td>
          <td>
            <input type="file" @change="getphoto"  />
            <img :src="queryInfo.photo" alt="" width="100px" height="100px">
          </td>
        </tr>
        
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="增加"
              class="btn btn-success"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
import moment, { lang } from 'moment';
import { reactive,ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const route = useRoute();
let num= parseInt(Math.random()*900+100);
let queryInfo = reactive({
    
  userCode: moment(new Date()).format('YYYYMMDD')+num,
  userName: '',
  phone: '',
  code: '',
  sex: 1,
  state: 1,
  jiFen: 0,
  money: 0,
  levelId: '',
  photo: ''
})

const getphoto = (e:any) => {
  let file = e.target.files[0];
  let fromData= new FormData();
  fromData.append('file',file);
  axios.post('/api/Img/GetPhoto',fromData)
  .then(res => {
    console.log(res);
    queryInfo.photo= res.data;
  })
  
  .catch(err => {
    console.log(err);
  })
}

let data :any= ref([])


//onMounted:生命周期钩子函数 ====文档就绪函数
onMounted(() => {
    getList();
})


//显示会员等级列表 
const getList = () => {
    axios({
        url: 'api/MemberLevel/GetMemberLeversList',
        method: 'get',
        
    })
    .then(res => {
        console.log(res);
        data.value = res.data
        
    })
    .catch(err => {

    })
}
const ok = () => {
  if(queryInfo.phone == '') {
    alert('手机号不能为空')
    return;
  }
  let reg = /^1[3-9]\d{9}$/g;//正则验证
  if(reg.test(queryInfo.phone)==false){
    alert('手机号格式不正确');
    return;
  }
  if(queryInfo.code == "") {
  alert('身份证号不能为空')
  return;
  }
  let reg1 = /^\d{17}[0-9Xx]$/;//身份证正则验证
    if(reg1.test(queryInfo.code)==false){
      alert('身份证格式不正确');
      return;
    }
    // if(Number.isInteger(Number(queryInfo.jiFen))==false){
    //   alert('积分只能是整数');
    // }
    // if(Number.isInteger(Number(queryInfo.money))==false){
    //   alert('余额只能是整数');
    // }
    if(queryInfo.jiFen=='') {
      alert('积分不能为空');
      return;
    }
    if(queryInfo.money=='') {
      alert('余额只能是整数');
    }
    if(queryInfo.levelId == '') {
      alert('请选择会员等级');
      return;
    }
    axios({
        url:'/api/User/AddUser',
        method:'post',
        data:queryInfo,
    })
    .then(res => {
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            router.push('/userList')
        }
        else {
            alert('添加失败')
        }
    })
    .catch(err => {
        console.log(err);
    })

}

</script>

<style scoped>

</style>